<!--  -->
<template>
  <div class="home">
    <!-- 导航 -->
    <nav-bar><div slot="center">购物街</div></nav-bar>
    <tab-control
      :titles="titles"
      @handleControl="Control"
      class="TabControl"
      v-show="TabControl"
      ref="tabControl1"
    />
    <!-- 内容部分 -->
    <scroll
      class="content"
      ref="scroll"
      :pull-up-load="true"
      :probe-type="3"
      @scroll="contentScroll"
      @pullingUp="loadMore"
    >
      <!-- 轮播 -->
      <swipe :images="images" @ImageLoad="ImageLoad" />
      <!-- 列表开始 -->
      <home-list :list="recommend" />
      <!-- 本周流行 -->
      <Featuer />
      <!-- 首页分类 -->
      <tab-control :titles="titles" @handleControl="Control" ref="tabControl2" />
      <!-- 图片列表 -->
      <goods-list :goods="goods[idx].list" />
    </scroll>

    <!-- 返回顶部 -->
    <back-top @click.native="backClick" v-show="isShowBackTop" />
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
//公共组件
import NavBar from "@/components/common/navbar/NavBar";
import Swipe from "@/components/content/Swipe/Swipe";
import Scroll from "@/components/common/scroll/Scroll";
import TabControl from "@/components/content/tabControl/TabControl";
import GoodsList from "@/components/content/goods/GoodsList";
import backTop from "@/components/content/backTop/backTop";
//网络请求 js 模块
import { getHomeMultidata, getHomeGoods } from "@/axios/HomeApi";
//home子组件
import HomeList from "./ChildComps/HomeList";
import Featuer from "./ChildComps/Featuer";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    NavBar,
    Swipe,
    Scroll,
    TabControl,
    GoodsList,
    backTop,
    HomeList,
    Featuer,
  },
  data() {
    //这里存放数据
    return {
      images: [],
      recommend: [],
      HomeList: [],
      titles: ["流行", "新款", "选项"],
      goods: [
        {
          item: "pop",
          page: 1,
          list: [],
        },
        {
          item: "new",
          page: 1,
          list: [],
        },
        {
          item: "sell",
          page: 1,
          list: [],
        },
      ],
      idx: 0,
      isShowBackTop: false,
      taboffsetTop: 0,
      isLoad: false,
      TabControl: false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 点击当前选项下标
    Control(idx) {
      this.idx = idx;
      this.getHomeGoods(idx);
      this.$refs.tabControl1.idx = idx;
      this.$refs.tabControl2.idx = idx;
    },
    // 返回顶部 x：0 y：0 延迟 0.5s
    backClick() {
      this.$refs.scroll.scrollTo(0, 0, 500);
    },
    // 返回顶部显示隐藏
    contentScroll(position) {
      if (position.y <= -2000) {
        this.isShowBackTop = true;
      } else {
        this.isShowBackTop = false;
      };
      if(position.y <= -this.taboffsetTop){
        this.TabControl = true;
      } else {
        this.TabControl = false;
      }
    },
    debounce(fn, timeOut) {
      let tiemId = null;
      return function() {
        if (tiemId) {
          clearTimeout(tiemId);
        }
        tiemId = setTimeout(fn, timeOut);
      };
    },
    // // 上拉添加页数
    loadMore() {
      let idx = this.idx;
      this.goods[idx].page += 1;
      // this.getHomeGoods(idx);
      getHomeGoods({
        type: this.goods[idx].item,
        page: this.goods[idx].page,
      }).then((res) => {
        // this.goods[idx].list = res.data.list;
        this.goods[idx].list.push(...res.data.list);
      });
      let refresh = this.debounce(this.$refs.scroll.refresh, 300);
      let finish = this.debounce(this.$refs.scroll.finish, 2000);
      finish();
      refresh();
    },

    ImageLoad() {
      if (!this.isLoad) {
        this.taboffsetTop = this.$refs.tabControl2.$el.offsetTop;
        console.log(this.taboffsetTop);
        this.isLoad = true;
      }
    },

    // API 请求
    getHome() {
      getHomeMultidata().then((res) => {
        this.images = res.data.banner.list;
        this.recommend = res.data.recommend.list;
      });
    },
    getHomeGoods(idx) {
      getHomeGoods({
        type: this.goods[idx].item,
        page: this.goods[idx].page,
      }).then((res) => {
        this.goods[idx].list = res.data.list;
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getHome();
    // 请求商品
    this.getHomeGoods(0);
    this.getHomeGoods(1);
    this.getHomeGoods(2);
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // 监听图片加载完成
    const refresh = this.debounce(this.$refs.scroll.refresh);
    this.$bus.$on("itemImageLoad", () => {
      refresh();
    });
    this.$refs.scroll.refresh;
    // 获取tabControl的offsetTop
    // 所有的组件都有一个属性$el：用于获取组件中的元素
    // console.log(this.$refs.tabControl.$el.offsetTop);
  },
};
</script>
<style lang="less" scoped>
.content {
  position: absolute;
  left: 0;
  top: 44px;
  height: calc(100% - 90px);
  overflow: hidden;
}
.TabControl {
  position: absolute;
  top: 44px;
  left: 0;
  z-index: 999;
}
</style>
